<template>
  <div>
    <div class="bd-content" v-if="type == 1">
      <div class="hd-top">
        <div class="left-box">
          <img :src="setInfo.logo.url" class="logo" v-if="setInfo.logo" />
          <span class="title">{{ setInfo.name || '' }}</span>
        </div>
        <div class="right-box">
          <span class="phone">{{ userPhone || '' }}</span>
          <span class="iconfont icon-tuichu" style="margin-right: 5px"></span>
          <span style="cursor: pointer" @click="handleLogout">退出登录</span>
        </div>
      </div>
      <div class="hd-content">
        <div class="max-wrapper">
          <div class="title">我的学校</div>
          <div class="mySchool">
            <div class="panel-box" v-for="(item, index) in schools" :key="index" @click="chooseSchool(item)">
              <div class="panel-box-item">
                <img :src="item.logo.url" alt="" class="logo" v-if="item.logo" />
                <div v-else class="logo"></div>
                <div class="school-info">
                  <div class="name">{{ item.name }}</div>
                  <div class="endtime" v-if="item.is_limit == 1 && item.isExpire == false">
                    {{ item.expireDay }}天后到期
                  </div>
                  <div class="endtime" v-if="item.is_limit == 0">不限时间</div>
                  <div class="endtime" v-if="item.is_limit == 1 && item.isExpire == true">已过期</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { companyInfo, getInfo } from '@/api/login'
import { mapActions } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      setInfo: {},
      userPhone: undefined,
      schools: [],
      type: undefined,
      choiceSchool: null, // 选择的学校
      defaultSchool: null, // 默认学校
    }
  },
  created() {
    this.type = this.$route.query.type
    this.defaultSchool = Number(this.$store.state.user.school)
    this.choiceSchool = Number(this.$store.state.user.school)
    console.log(this.defaultSchool)
    if (this.type == 1) {
      this.getSetInfo()
      this.getSchools()
    }
  },
  mounted() {
    if (this.type == 2) {
      const that = this
      this.$store.commit('SET_ROLES', [])
      this.$store.commit('SET_SCHOOL', Number(this.$route.query.id))
      this.$store.commit('SET_SCHOOL_NAME', this.$route.query.name)

      that.$router.push({ name: 'dashboard' })
     
      
    } 
  },
  methods: {
    ...mapActions(['Logout','GetInfo']),
    moment,
    getSetInfo() {
      companyInfo()
        .then((res) => {
          this.setInfo = res.value
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败!')
        })
    },
    // 时间字符串转时间戳
    timeStamp: function (str) {
      if (str != 'now') {
        str = str.substring(0, 19)
        str = str.replace(/-/g, '/')
        return new Date(str).getTime() / 1000
      } else {
        return new Date().getTime()
      }
    },
    getSchools() {
      let nowTime = null 
      const expirTime = null
      getInfo({ school_id: this.$store.state.user.school })
        .then((res) => {
          console.log(res)
          this.userPhone = res.phone
          this.schools = res.schools
          this.schools.forEach((item) => {
            item.isExpire = false
            item.expireDay = null
            item.nowTime = null
            item.expirTime = null
            if (item.is_limit == 1) {
              nowTime = this.timeStamp(moment().format('YYYY-MM-DD'))
              item.expirTime = this.timeStamp(item.limit_time)
              console.log(nowTime, expirTime)
              // 未到期
              if (nowTime <= item.expirTime) {
                const days = item.expirTime - nowTime
                item.expireDay = parseInt(days / (60 * 60 * 24))
                item.isExpire = false
              } else {
                // 到期
                item.isExpire = true
              }
            }
          })
          console.log(this.schools)
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败!')
        })
    },
    chooseSchool(data) {
      if (data.isExpire) {
        this.$message.warning(data.name + '已到期,请联系管理员续费！')
        return
      }
      // this.$route.query.id=data.id
      // this.$route.query.name=data.name
      this.$store.commit('SET_SCHOOL', data.id)
      this.$store.commit('SET_SCHOOL_NAME', data.name)
      this.$store.commit('SET_ROLES', [])
      this.$router.push({ name: 'dashboard' })
    },
    handleLogout() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk: () => {
          return that
            .Logout({})
            .then(() => {
              // store.dispatch('Logout')
              // that.$message.success('登出成功')
            })
            
        },
        onCancel() {},
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/img/customFormIcon/iconfont.css';
.bd-content {
  height: 100vh;
  background: #f0f2f5;
}
.hd-top {
  height: 56px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  color: #333;
  .left-box {
    display: flex;
    align-items: center;
    .logo {
      height: 24px;
      height: 24px;
    }
    .title {
      margin-left: 15px;
      font-size: 16px;
    }
  }

  .right-box {
    display: flex;
    align-items: center;
    // margin-right: 24px;
    .phone {
      padding-right: 24px;
      height: 20px;
      line-height: 20px;
      box-sizing: content-box;
      border-right: 1px solid #e8e8e8;
      margin-right: 25px;
    }
  }
}
.hd-content {
  min-height: calc(100vh - 136px);
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  .max-wrapper {
    max-width: 1150px;
    width: 100%;
    overflow-x: hidden;
    margin: 0 auto !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    flex: 1 1 0%;
    padding: 30px;
    .title {
      font-size: 22px;
      font-weight: 600;
      color: #333;
    }
    .mySchool {
      display: flex;
      flex-wrap: wrap;
      .panel-box {
        width: 250px;
        height: 100px;
        border: 1px solid #eeeeee;
        border-radius: 5px;
        margin-top: 30px;
        margin-right: 30px;
        cursor: pointer;
        .panel-box-item {
          height: 100%;
          display: flex;
          align-items: center;
          .logo {
            margin-left: 20px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
          }
          .school-info {
            margin-left: 20px;
            flex: 1;
            overflow: hidden;
            .name {
              font-size: 18px;
              color: #333;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .endtime {
              padding-top: 5px;
              color: #999;
            }
          }
        }
      }
      .panel-box:nth-child(4n + 4) {
        margin-right: 0 !important;
      }
      .panel-box:hover {
        border-color: #1890ff;
        background-color: #e6f7ff;
      }
    }
  }
}
</style>
